<template>
  <a-modal :visible="visible" title="发票对应生成凭证" :width="600" @ok="onOk" @cancel="onCancel"  ok-text="下一步" cancel-text="取消">
    <a-form :model="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="入账日期">
            <a-date-picker v-model:value="form.entryDate" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="发票对应生成凭证">
        <a-radio-group v-model:value="form.voucherType">
          <a-radio value="one-to-one">一张发票对应一张凭证</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="入账科目">
        <a><span style="color: #1890ff; cursor: pointer;">我该如何快速录入入账科目 - 文字版</span></a>
      </a-form-item>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="应收或应付科目">
            <a-select v-model:value="form.receivableSubject" placeholder="请选择">
              <a-select-option value="1">科目1</a-select-option>
              <a-select-option value="2">科目2</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收入科目">
            <a-select v-model:value="form.incomeSubject" placeholder="请选择">
              <a-select-option value="1">科目1</a-select-option>
              <a-select-option value="2">科目2</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="税金科目">
            <a-select v-model:value="form.taxSubject" placeholder="请选择">
              <a-select-option value="1">科目1</a-select-option>
              <a-select-option value="2">科目2</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="摘要">
            <a-input v-model:value="form.summary" placeholder="请输入摘要，如：销售收入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="摘要需自动追加：">
        <a-checkbox-group v-model:value="form.summaryOptions">
          <a-row>
            <a-col :span="4"><a-checkbox value="业务日期">业务日期</a-checkbox></a-col>
            <a-col :span="4"><a-checkbox value="发票类型">发票类型</a-checkbox></a-col>
            <a-col :span="4"><a-checkbox value="发票号码">发票号码</a-checkbox></a-col>
            <a-col :span="4"><a-checkbox value="发票内容">发票内容</a-checkbox></a-col>
            <a-col :span="4"><a-checkbox value="往来单位">往来单位</a-checkbox></a-col>
            <a-col :span="4"><a-checkbox value="备注">备注</a-checkbox></a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';

defineExpose({ showModal });

const visible = ref(false);
const form = reactive({
  entryDate: '',
  voucherType: 'one-to-one',
  receivableSubject: '',
  incomeSubject: '',
  taxSubject: '',
  summary: '',
  summaryOptions: ['业务日期', '发票类型', '发票号码', '发票内容', '往来单位', '备注'],
});

function showModal(record) {
  visible.value = true;
  // 可根据record初始化表单
}

function onCancel() {
  visible.value = false;
}

function onOk() {
  // 校验和提交逻辑
  message.success('凭证生成成功！');
  visible.value = false;
}
</script>

<style scoped>
:deep(.ant-modal-body) {
  padding-top: 12px;
}
</style> 